import React from "react";
import { useTranslation } from "react-i18next";
import AdminLayout from "@/user.InterfaceLayer/Libraries/Layouts/Admin.layout";
import Link from "next/link";

interface UsersAdminPageProps {
  users?: any;
}

const UsersAdminPage: React.FC<UsersAdminPageProps> = (props) => {
  const { t } = useTranslation();
  const { users } = props;

  let isLoading = false;
  let error = false;

  return (
    <AdminLayout
      title={t("AdminPage.title.users")}
      isLoading={isLoading}
      error={error}
      block={
        <div className="overflow-x-auto">
          <table className="min-w-full">
            <thead className="border-b">
              <tr>
                <th className="px-5 text-left">ID</th>
                <th className="p-5 text-left">NAME</th>
                <th className="p-5 text-left">EMAIL</th>
                <th className="p-5 text-left">ADMIN</th>
                <th className="p-5 text-left">ACTIONS</th>
              </tr>
            </thead>
            <tbody>
              {users?.map((user: any) => (
                <tr key={user._id} className="border-b">
                  <td className=" p-5 ">{user._id.substring(20, 24)}</td>
                  <td className=" p-5 ">{user.name}</td>
                  <td className=" p-5 ">{user.email}</td>
                  <td className=" p-5 ">{user.isAdmin ? "YES" : "NO"}</td>
                  <td className=" p-5 ">
                    <Link
                      href={`/admin/user/${user._id}`}
                      passHref
                      type="button"
                      className="default-button"
                    >
                      Edit
                    </Link>
                    &nbsp;
                    <button
                      type="button"
                      className="default-button"
                      // onClick={() => deleteHandler(user._id)}
                    >
                      Delete
                    </button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      }
    />
  );
};
export default UsersAdminPage;
